<template>
	<div>
		<!-- 头部 -->
		<div class="heard-body">
			<div class="heard-left">
				<el-button type="success" size="small" plain @click="addDialogVisible = true">新增</el-button>
				<el-button type="danger" size="small" plain disabled>批量删除</el-button>
				<el-button type="warning" size="small" plain disabled>导出</el-button>
			</div>

			<div class="heard-right">
				<el-input
					style="margin-right: 10px"
					placeholder="请输入搜索内容"
					v-model="searchInfo.keyword"
					size="small"
					clearable
					@change="search"
				></el-input>
				<el-button type="primary" size="small" plain icon="el-icon-search" @click="search"></el-button>
			</div>
		</div>
		<!-- 主体区域 -->
		<el-card shadow="hover" v-show="flag">
			<el-table :data="tableData" stripe style="width: 100%" class="motion-table1">
				<el-table-column prop="title" :label="$t('message.table.title1')" width="300" fixed> </el-table-column>
				<el-table-column label="链接" width="660">
					<template slot-scope="scope">
						<a :href="scope.row.videoUrl">{{ scope.row.videoUrl }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="uploader" :label="$t('message.table.title3')" width="100"> </el-table-column>
				<el-table-column prop="videoAddtime" :label="$t('message.table.title4')"> </el-table-column>
				<el-table-column fixed="right" :label="$t('message.table.title5')" width="60">
					<template slot-scope="scope">
						<el-button style="color: red" type="text" size="small" @click="handleClick(scope.row)">{{ $t('message.table.title8') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageInfo.pagenum"
					:page-sizes="[4, 6, 8, 10]"
					:page-size="pageInfo.pagesize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</el-card>
		<!-- 新增开始 -->
		<el-dialog style="hegiht: 200px" title="新增视频" :visible.sync="addDialogVisible" width="40%" :before-close="handleClose">
			<el-form :model="addInfo" status-icon label-width="100px" class="demo-ruleForm">
				<el-form-item label="视频名称">
					<el-input v-model="addInfo.title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="视频链接" prop="title">
					<el-input v-model="addInfo.url" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 新增结束 -->
		<!-- 确认删除 -->
		<el-dialog style="hegiht: 200px" title="删除视频" :visible.sync="deletaDialogVisible" width="40%" :before-close="handleClose">
			<div>是否确认删除该条视频</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="deletaDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleta()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 删除结束 -->
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { getVideo, searchVideo, addVideo, deleteVideo } from '@/api/debateMaterials/recommendVideo/index.js';
export default {
	name: 'recommendVideo',
	data() {
		return {
			flag: true,
			tableData: [],
			pageInfo: {
				pagenum: 1,
				pagesize: 4,
			},
			total: 0,
			searchInfo: {
				keyword: '',
				pagenum: 1,
				pagesize: 4,
			},
			// 新增数据
			addInfo: {
				title: '',
				uploader: Session.get('userInfo').otherInfo.name,
				url: '',
			},
			addDialogVisible: false,
			deletaDialogVisible: false,
			delId:''
		};
	},
	created() {
		this.getVideoInfo();
	},
	methods: {
		// 分页获取推荐视频
		async getVideoInfo() {
			let res = await getVideo(this.pageInfo);
			if (res.statusCode === 20000) {
				this.tableData = res.data.records;
				this.total = res.data.total;
			}
		},
		// 分页查询
		async search() {
			this.searchInfo.pagenum = this.pageInfo.pagenum;
			this.searchInfo.pagesize = this.pageInfo.pagesize;
			let res = await searchVideo(this.searchInfo);
			if (res.statusCode === 20000) {
				this.tableData = res.data.records;
				this.total = res.data.total;
				this.$message.success('查询成功！');
			} else {
				this.$message.error('查询失败！');
			}
		},
		// 新增视频
		async add() {
			let res = await addVideo(this.addInfo);
			if (res.statusCode === 20000) {
				this.getVideoInfo();
				this.$message.success('新增成功！');
				this.addDialogVisible = false;
			} else {
				this.$message.error('新增失败！');
				this.addDialogVisible = false;
			}
		},
		async deleta() {
			let res = await deleteVideo(this.delId)
			if(res.statusCode === 20000) {
				this.getVideoInfo()
				this.$message.success("删除成功！")
				this.deletaDialogVisible = false
			}else {
				this.$message.error("删除失败！")
				this.deletaDialogVisible = false
			}
		},
		handleSizeChange(val) {
			console.log(val);
		},
		handleCurrentChange(val) {
			console.log(val);
		},
		handleClick(row) {
			this.delId = row.id
			this.deletaDialogVisible = true
		},
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
	},
};
</script>

<style scoped lang="scss">
.heard-body {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
}
.heard-right {
	display: flex;
	margin-left: 15px;
	align-items: center;
}
.page {
	margin-top: 10px;
}
.motion-table1 {
	opacity: 0;
	animation-name: error-num;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: calc(1 / 10) + s;
}
</style>
